<template>
   <el-select v-model="chid" placeholder="请选择" clearable >
                   <el-option
                      v-for="item in channelList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                   </el-option>
              </el-select>
</template>

<script>
export default {
  created () {
    this.getChannels()
  },
  data () {
    return {
      channelList: [],
      chid: ''// 记录当前选中的频道信息
    }
  },
  // 使用对象方式
  // props: {
  //   // cid: {
  //   //   default: 0
  //   // }
  // },
  // 使用数组方式
  props: ['cid'],

  // 对chid进行事件监听
  watch: {
    // 对父传子接收到的cid进行监听
    cid: function (newv) {
      this.chid = newv
    },
    chid: function (newv, oldv) {
      this.$emit('slt', newv)
    }
  },
  methods: {
    // 获取频道列表
    getChannels () {
      // 通过axios发送请求得到真实频道数据
      let pro = this.$http.get('/channels')
      pro
        .then(result => {
          // console.log(result) // config data headers status
          // 把获取的频道数据赋给频道列表
          this.channelList = result.data.data.channels
        })
        .catch(err => {
          return this.$message.error('获取频道信息错误' + err)
        })
    }
  }
}
</script>
